"use client";

import { useOrganizationList } from "@clerk/nextjs";
import Item from "./item";

/**
 * @property 组织列表组织
 */

const List = () => {
  /**
   * useOrganizationList 检索活跃用户的组织
   * userMemberships 设置为true，表示默认使用所有属性
   * 返回值userMemberships 包含用户组织成员资格列表的内容
   * https://clerk.com/docs/references/react/use-organization-list#use-organization-list
   */
  const { userMemberships } = useOrganizationList({
    userMemberships: true,
  });

  if (!userMemberships.data?.length) return null;

  return (
    <ul className="space-y-4">
      {userMemberships.data?.map((mem) => {
        return (
          <Item
            key={mem.organization.id}
            id={mem.organization.id}
            name={mem.organization.name}
            imageUrl={mem.organization.imageUrl}
          />
        );
      })}
    </ul>
  );
};

export default List;
